<template>
	<view class="notice-activity">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="activity-list">
			<view class="activity-item" v-for="(item,index) in list" :key="index">
				<u-image :src="item.image" width="100%" height="240"></u-image>
				<view class="title u-line-1">
					{{item.title}}
				</view>
				<view class="other">
					<text class="time">{{item.create_time}}</text>
					<view class="more" v-if="item.has_read == 0" @click="detail(item)">
						查看详情(<text style="color: red;">未读</text>)
						<!-- <u-icon name="arrow-right" size="20" color="#909399"></u-icon> -->
					</view>
					<view class="more" v-else @click="detail(item)">
						查看详情
						<!-- <u-icon name="arrow-right" size="20" color="#909399"></u-icon> -->
					</view>
				</view>
			</view>

			<view v-if="list.length <= 0" style="text-align: center;margin-top: 30rpx;">
				<text>
					暂无数据~
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '活动消息',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		list: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.list = [{
			id: 1,
			title: '测试活动一',
			has_read: 1,
			image: state.imgHost + '/uploads/202508/295674320250811.png',
			create_time: '2025-09-05 16:09:41'
		}, {
			id: 2,
			title: '测试活动二',
			has_read: 0,
			image: state.imgHost + '/uploads/202508/33652628923188080928.jpg',
			create_time: '2025-09-05 16:09:41'
		}];
	}

	function detail(item) {
		console.log('活动信息详情', item);
		item.has_read = 1;
		pageRoute("/servePages/notice/activity-view/activity-view?id=" + item.id)
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.notice-activity {
		.activity-list {
			padding: $m24;

			.activity-item {
				overflow: hidden;
				background-color: $u-bg-reverse-color;
				margin-bottom: $m24;
				border-radius: $radius-12;

				.title {
					padding: $m12 $m24;
					font-size: $font-30;
					color: $u-main-color;
				}

				.other {
					@include f-between;
					padding: 0 $m24 $m20;

					.time,
					.more {
						font-size: $font-24;
						color: $u-tips-color;
					}
				}
			}
		}
	}
</style>